<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue2.5.15.js" type="application/javascript"></script>
</head>
<body>
    <div id="app">
        <div>
            <ul>

                <input type="text"  v-model="key">
                <li v-for="(item,index) in filter_books"
                    :key="index">
                    序号：{{index+1}}&nbsp;&nbsp;书名：{{item.name}}----
                    <input type="button" value="删除" @click="del(index)">
                    <input type="button" value="修改" @click="update(index)">
                </li>
            </ul>
        </div>
    </div>
</body>
<script>
    const vm = new Vue(
        {
            el:"#app",
            data:{
                key:"",
                books:[
                    {name:"Vue.js实战"},
                    {name:"SpringBoot实战"},
                    {name:"SpringCloud实战"},
                    {name:"redis实战"},
                ],
                // filter_books:{},
                book:{

                },
            },

            methods:{

            },
            computed:{
                filter_books(){
                    if(!this.key||!this.key.trim()){
                        return this.books
                    }
                    return this.books.filter((book)=>{
                        return book.name.match(this.key)
                    })
                }
            }
        }
    )
</script>
</html>